<template>
	<div class="basic_wrap">
		<div class="back_left" @click="$router.back()">
			<img src="../img/common/back_b.png">
		</div>
    <div class="logoWrap">
      <img src="@/assets/img/logo.png" class="logoImg">
    </div>
		<!-- 非手机注册 start -->
<!--		<div class="form_div" v-if="config.register_phone">-->
<!--			<form class="form">-->
<!--				<div class="item">-->
<!--					<input v-model.trim="data.username" type="text" class="inp" :placeholder="$t('login.username')">-->
<!--				</div>-->
<!--        <div class="item">-->
<!--          <input v-model.trim="data.phone" type="number" class="inp" placeholder="请输入手机号">-->
<!--        </div>-->
<!--				<div class="item">-->
<!--					<input v-model.trim="data.password" :type="password" class="inp"-->
<!--						:placeholder="$t('login.password')">-->
<!--					<div class="eye_bi" :class="password == 'text' ? 'eye' : ''" @click="showPwd" />-->
<!--				</div>-->
<!--				<div class="item">-->
<!--					<input v-if="config.invite_code" v-model.trim="data.invite_code" type="text" class="inp"-->
<!--						:placeholder="$t('register.inviteCode')">-->
<!--					<input v-if="!config.invite_code" v-model.trim="data.invite_code" type="text" class="inp"-->
<!--						:placeholder="$t('register.inviteCodeOptional')">-->
<!--				</div>-->
<!--				<div class="item">-->
<!--					<input v-model.trim="data.code" type="text" class="inp" :placeholder="$t('login.code')">-->
<!--					<img style="height: 32px;" :src="verify_img" @click="getVerifyCode()">-->
<!--				</div>-->
<!--&lt;!&ndash;				<div class="register_btn"&ndash;&gt;-->
<!--&lt;!&ndash;					:class="data.username == '' || data.password == '' || data.code == ''? 'no_touch' : ''"&ndash;&gt;-->
<!--&lt;!&ndash;					@click="submit">&ndash;&gt;-->
<!--&lt;!&ndash;					→&ndash;&gt;-->
<!--&lt;!&ndash;				</div>&ndash;&gt;-->
<!--			</form>-->
<!--		</div>-->
		<!-- 非手机注册 end -->
		<!-- 手机注册 start -->
		<div class="form_div">
			<form class="form">
				<div class="item" v-if="register_phone == 1">
					<van-dropdown-menu :overlay="false">
						<van-dropdown-item v-model="value" :options="country_code" />
					</van-dropdown-menu>
					<input v-model.trim="data.phone" type="number" class="inp" :placeholder="$t('login.phone')">
				</div>
				<div class="item" v-if="register_phone == 1">
					<input v-model.trim="data.smsCode" type="text" class="inp" :placeholder="$t('login.code')">
					<van-count-down :time="time" class="btn get_captcha" @finish="timeCall">
						<template v-slot="timeData">
							<span @click="sendCode">{{
					  timeData.seconds > 0
						? timeData.seconds
						: $t('auth.sendPhoneCode')
					}}</span>
						</template>
					</van-count-down>
				</div>
        				<div class="item">
        					<input v-model.trim="data.username" type="text" class="inp" :placeholder="$t('login.username')">
        				</div>
				<div class="item">
					<input v-model.trim="data.password" :type="password" class="inp"
						:placeholder="$t('login.password')">
					<div class="eye_bi" :class="password == 'text' ? 'eye' : ''" @click="showPwd" />
				</div>
				<div class="item">
					<input v-if="config.invite_code" v-model.trim="data.invite_code" type="text" class="inp"
						:placeholder="$t('register.inviteCode')">
					<input v-if="!config.invite_code" v-model.trim="data.invite_code" type="text" class="inp"
						:placeholder="$t('register.inviteCodeOptional')">
				</div>
<!--				<div class="register_btn"-->
<!--					:class="data.phone == '' || data.smsCode == ''|| data.password == ''? 'no_touch' : ''"-->
<!--					@click="submit">-->
<!--					→-->
<!--				</div>-->
			</form>
		</div>
    <div class="loginBtn">
      <div class="btn" @click="submit">注册</div>
    </div>
		<!-- 获取验证码需先验证 -->
		<van-popup v-model:show="show_sms_verify" :round="true" :style="{ width: '90%' }">
			<div class="sms_verify">
				<div>
					<img style="height: 40px;" :src="verify_img" @click="getVerifyCode()">
					<br><input v-model.trim="verify_code" type="text" class="inp" :placeholder="$t('auth.charEmpty')">
				</div>
				<div class="btn flex_center">
					<div @click="show_sms_verify=false;">{{$t('utils.cancel')}}</div>
					<div @click="getSmsCode()">{{$t('utils.confirm')}}</div>
				</div>
			</div>
		</van-popup>
		<!-- 手机注册 end -->
<!--		<div class="login_register">-->
<!--			<router-link to="/login">-->
<!--				<div>-->
<!--					{{$t('login.loginNow')}}-->
<!--				</div>-->
<!--			</router-link>-->
<!--		</div>-->

		<div class="kefu" :class="show_kefu ? '' : 'kefu_hide'" @click="kefu_to">
			<img class="kefu_img" src="../img/index/kefu.png">
		</div>
    <div class="appWrap" v-if="showDownApp()">
      <div class="abtn" @click="jump">
        <img src="@/assets/img/downA.png" style="width: 16px;height: 16px">
        <div>下载APP</div>
      </div>
    </div>
	</div>
</template>

<script>
	import Vue from "vue";
	import bsHeader from '../../components/bsHeader.vue'
	import Fetch from "../../utils/fetch";
	import {
		CountDown,
		Checkbox,
		Dialog,
		DropdownMenu,
		DropdownItem,
		Popup
	} from "vant";
	Vue.use(CountDown).use(Checkbox).use(Dialog).use(DropdownMenu).use(DropdownItem).use(Popup);

	export default {
		name: "register",
		components: {
			bsHeader
		},
		data() {
			return {
				lang: this.$i18n.locale || "en_us",
				language_logo: localStorage.getItem('language_logo'),
				show_kefu: false,
				password: "password",
				loading: false,
				data: {
					username: "",
					password: "",
					invite_code: "",
					code: "",
					smsCode: "",
					phone: "",
					country_code: ''
				},
				config: {
					invite_code: 0,
					register_phone: 1
				},
				verify_img: "",
				country_code: [],
				value: 0,
				time: 0,
				is_send: false,
				show_sms_verify: false,
				verify_code: '',
        isApp: true,
        register_phone:0
			};
		},
		created() {
			if (window.plus) {
				plus.navigator.setStatusBarBackground('#FAFAFA');
				plus.navigator.setStatusBarStyle('dark');
			}
			this.$parent.footer("user", false);
		},

		mounted() {
			var that = this;
			document.body.addEventListener(
				"scroll",
				function() {
					if (!that.show_kefu) {
						return;
					}
					that.show_kefu = false;
				},
				false
			);
			document.addEventListener(
				"click",
				function(ev) {
					if (ev.target.className != "kefu_img") {
						that.show_kefu = false;
					}
				},
				false
			);
			this.start();
			this.getLanguages();
			this.getparams();
			this.getVerifyCode();
		},
		methods: {
      showDownApp(){
        try {
          if(AppInterface.version()){
            return false
          }
        }catch (e) {
          return true
        }
      },
      jump() {
        Fetch('/index/int').then((r) => {
          if(r.code == 1){
            let url = r.data.version.url
            if (url.indexOf('http') == 0) {
              window.open(url);
            } else {
              this.$router.push(url);
            }
          }
      })
      },
			start() {
				Fetch("/index/getWebInfo").then((r) => {
					this.config = r.data;
          this.register_phone = r.data.register_phone
				});
			},
			getLanguages() {
				Fetch('/index/getLanguages').then((r) => {
					var list = r.data.list;
					var countryCode = [];
					for (var i = 0; i < list.length; i++) {
						countryCode.push({
							text: list[i]['country_code'],
							value: i,
							counrty: list[i]['country']
						});
					}
					this.country_code = countryCode;
					let country = this.country_code.find((country) => {
						return country['counrty'] === this.lang;
					});
					this.value = country.value;
				});
			},
			timeCall() {
				this.is_send = false;
				this.time = 0;
			},
			sendCode() {
				this.verify_code = '';
				if (this.is_send) {
					return false;
				}
				if (!this.data.phone) {
					this.$toast(this.$t('auth.phoneEmpty'));
					return false;
				}
				if (this.data.phone.length < 6 || this.data.phone.length > 16) {
					this.$toast(this.$t('auth.phoneError'));
					return;
				}
				this.show_sms_verify = true;
			},
			getSmsCode() {
				if (this.is_send) {
					return false;
				}
				if (!this.data.phone) {
					this.$toast(this.$t('auth.phoneEmpty'));
					return false;
				}
				if (this.data.phone.length < 6 || this.data.phone.length > 16) {
					this.$toast(this.$t('auth.phoneError'));
					return;
				}
				if (!this.verify_code) {
					this.$toast(this.$t('auth.charEmpty'));
					return false;
				}
				this.is_send = true;
				Fetch("/user/getSmsCode", {
					phone: this.data.phone,
					country_code: this.country_code[this.value]['text'],
					verify_code: this.verify_code
				}).then(() => {
					this.show_sms_verify = false;
					this.time = 60 * 1000;
					this.$toast({
						background: "#07c160",
						message: this.$t('auth.sendsuccess'),
					});
				}).catch(() => {
					this.is_send = false;
					this.show_sms_verify = false;
					this.getVerifyCode();
				});
			},
			kefu_to() {
				if (this.show_kefu) {
          const currentTime = new Date();
          const currentHour = currentTime.getHours();
          const currentMinute = currentTime.getMinutes();
          if (
              (currentHour === 9 && currentMinute >= 0) ||
              (currentHour > 9 && currentHour < 23) ||
              (currentHour === 23 && currentMinute === 0)
          ) {
            Fetch('/index/service_list').then(res => {
              if(res.data && res.data.list.length > 0){
                this.$router.push('/service/' + res.data.list[0].id);
              }
            })
          } else {
            this.$toast('客服服务时间早上9点--晚上11点');
          }
				}
				this.show_kefu = !this.show_kefu;
			},
			showPwd() {
				if (this.password == "password") {
					this.password = "text";
				} else {
					this.password = "password";
				}
			},
			getparams() {
				var invite_code = this.$route.query.code;
				this.data.invite_code = invite_code;
			},
			submit() {
				if (this.loading) {
					return false;
				}
				//数字、字母或下划线
				var reg1 = /^[0-9a-zA-Z_]{1,}$/;
				//非手机号注册判断
				// if (!this.config.register_phone) {
				// 	if (!this.data.username) {
				// 		this.$toast(this.$t('login.usernameEmpty'));
				// 		return false;
				// 	}
				// 	if (!reg1.test(this.data.username)) {
				// 		this.$toast(this.$t('login.usernameLimit'));
				// 		return false;
				// 	}
				// 	if (this.data.username.length > 16 || this.data.username.length < 4) {
				// 		this.$toast(this.$t('login.usernameLength'));
				// 		return false;
				// 	}
				// }
				//手机号注册判断
        if (!this.data.phone && this.register_phone == 1) {
          this.$toast(this.$t('auth.phoneEmpty'));
          return false;
        }
        if (!this.data.username) {
          this.$toast('请输入用户名');
          return false;
        }
        if ((this.data.phone.length < 6 || this.data.phone.length > 16) && this.register_phone == 1) {
          this.$toast(this.$t('auth.phoneError'));
          return;
        }
        if (!this.data.smsCode  && this.register_phone == 1) {
          this.$toast(this.$t('login.codeEmpty'));
          return false;
        }
        this.data.country_code = this.country_code[this.value]['text'];
				if (!this.data.password) {
					this.$toast(this.$t('login.passwordEmpty'));
					return false;
				}
				if (!reg1.test(this.data.password)) {
					this.$toast(this.$t('login.passwordLimit'));
					return false;
				}
				if (this.data.password.length > 16 || this.data.password.length < 6) {
					this.$toast(this.$t('login.passwordLength'));
					return false;
				}
				if (this.config.invite_code && !this.data.invite_code) {
					this.$toast(this.$t('register.inviteCodeEmpty'));
					return false;
				}
				this.loading = true;
				Fetch("/index/register", {
					...this.data,
				}).then((res) => {
					if (res.data.token) {
						localStorage.setItem('token', res.data.token);
					}
					this.$toast(this.$t('register.registerSuccess'));
					this.$router.replace("/");
				}).catch((res) => {
					this.getVerifyCode();
					this.loading = false;
				});
			},
			getVerifyCode() {
				Fetch("/index/captcha").then((r) => {
					this.verify_img = r.data.image;
				});
			}
		},
	};
</script>

<style lang="less" scoped>

	.basic_wrap{
    background-image: url(../../assets/img/otherBac.png);
    background-size: cover;
    background-position: center top;
    min-height: 100vh;
    position: relative;
	}
	.form_div {
    margin: 0 34px;
		.form {
			.register_btn {
				background: #68326C;
				color: #FFFFFF;
				width: 60px;
				height: 60px;
				border-radius: 50%;
				float: right;
				margin-right: 3%;
				text-align: center;
				line-height: 60px;
				font-size: 36px;
				font-weight: bold;
			}
		}
	}
  .logoWrap{
    display: flex;
    justify-content: center;
    margin-top: 90px;
    margin-bottom: 75px;
    .logoImg{
      width: 22.4vw;
      height: 22.4vw;
    }
  }
	.back_left {
		background: unset;
		img {
			width: 20px;
			position: fixed;
			top: 10px;
			left: 10px;
		}
	}

	.language {
		position: absolute;
		top: 6px;
		right: 6px;
		height: 30px;
		z-index: 11;

		img {
			height: 100%;
		}
	}

	.logo {
		margin: 50px 0 0 30px;

		img {
			height: 80px;
		}
	}

	.item {
		height: 40px;
		font-size: 14px;
		display: flex;
    align-items: center;
		background:#F3FCFF;
		border-radius: 25px;
		padding: 0 20px;
    margin-bottom: 16px;
		input {
			height: 40px;
			flex: 1;
		}

		.get_captcha {
			line-height: 40px;
		}

		.eye_bi {

		}
	}
  .loginBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 76px;
    .btn{
      width: 77vw;
      height: 40px;
      background: linear-gradient(90deg, #018DFF 0%, #0039FF 100%);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 16px;
    }
  }
	.sms_verify {
		padding: 20px 20px 0 20px;

		input {
			margin-top: 15px;
			height: 20px;
			font-size: 16px;
			width: 100%;
		}

		.btn {
			margin-top: 15px;
			justify-content: space-around;
			color: #ee0a24;
			height: 48px;
			font-size: 16px;
			border-top: 1px solid #ebedf0;

			div {
				width: 50%;
				text-align: center;
			}

			div:nth-child(1) {
				border-right: 1px solid #ebedf0;
			}
		}
	}

	.login_register {

	}
  .appWrap{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    .abtn{
      width: 195px;
      height: 40px;
      background: linear-gradient(90deg, #018DFF 0%, #0039FF 100%);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 16px;
    }
  }
	/deep/ .van-dropdown-menu__bar {
		background-color: unset;
		box-shadow: unset;
		height: 50px;
		margin-right: 10px;
	}

	/deep/ .van-popup--top {
		left: 5%;
		width: 30%;
	}
</style>
